<template>
  <canvas
    v-if="canvasId"
    :id="canvasId"
    :canvasId="canvasId"
		:disable-scroll="true"
		class="f2-canvas"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
		@longtap="press">
  </canvas>
</template>

<script>
import F2 from '@antv/wx-f2';

export default {
  props: {
    canvasId: {
      type: String,
      default: 'f2-canvas',
    },
		opts: {
			type: Object
		}
  },
	// #ifdef H5
  mounted() {
    if (this.opts && !this.opts.lazyLoad) this.init();
  },
	// #endif
	// #ifndef H5
	onReady() {
		if (this.opts && !this.opts.lazyLoad) this.init();
	},
	// #endif
  methods: {
    init(callback) {
			const canvasId = this.canvasId;
      const ctx = uni.createCanvasContext(this.canvasId, this);
      const canvas = new F2.Renderer(ctx);
      this.canvas = canvas;
      const query = uni.createSelectorQuery().in(this)
      query.select(`#${canvasId}`).boundingClientRect(res => {
        if (typeof callback === 'function') {
          callback(canvas, res.width, res.height, F2)
        } else if (this.opts && this.opts.onInit) {
          this.opts.onInit(canvas, res.width, res.height, F2)
        }
      }).exec()
    },
    touchStart(e) {
      if (this.canvas) {
        this.canvas.emitEvent('touchstart', [e])
      }
    },
    touchMove(e) {
      if (this.canvas) {
        this.canvas.emitEvent('touchmove', [e])
      }
    },
    touchEnd(e) {
      if (this.canvas) {
				
        this.canvas.emitEvent('touchend', [e])
      }
    },
    press(e) {
      if (this.canvas) {
        this.canvas.emitEvent('press', [e])
      }
    }
  },
};
</script>
<style scoped>
.f2-canvas {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>